<template>
  <!-- 最大盒子 -->
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="''" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'rgba(0,0,0,0)'">
      <view class="max_box" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/dailiqueren_bg1@2.jpg)`,paddingTop: safeAreaInsets?.top + 'px',height:`calc(100vh - ${safeAreaInsets?.top}px)`}">

        <!-- 部门 -->
        <view class="department" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff_v1/dailiqueren_bg2@2.png)` }">
          <view>{{ department_title }}</view>
        </view>

        <view class="position_bottom">
          <!-- 按钮 -->
          <view class="button" @tap="consent">同意成为代理人</view>
          <!-- 勾选相关协议 -->
          <view class="agreement" :class="{ shake: currentProtocol }">
            <label class="radio" @tap="onChange">
              <radio @tap.stop="onChange" :checked="protocol" class="is-checked" color="#0038F7" />
              <view>我已阅读并遵守
                <text @tap.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)">《{{ appInfo.user_protocol.title }}》</text>
                和
                <text @tap.stop="onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)">《{{ appInfo.privacy_protocol.title }}》</text>
              </view>
            </label>
          </view>
        </view>
          
 <s-public-modal @closepop="closepop" :show="popshows" :imagesucceedSrc="dataToinformaion.imageSrc"                     
        :subtitle="dataToinformaion.subtitle" :dialogStatus="dataToinformaion.dialogStatus"></s-public-modal>
      </view>
    </s-layout>
</template>

<script setup>
  import { ref,computed, reactive } from "vue";
  import { baseUrl } from "@/sheep/config";
  import sheep from '@/sheep';
  import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
  import { onLoad } from "@dcloudio/uni-app";
  const { safeAreaInsets } = uni.getSystemInfoSync()
  const userStore = sheep.$store('user');
  const appInfo = computed(() => sheep.$store('app').info);
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const protocol = ref(false)
  const department_id = ref()
  const share_id = ref()
  onLoad((options) => {
    if(userInfo.group_id == 11) {
      userStore.setActive(0)
      userStore.setStayPort('user')
      userStore.setabPort('user')
      sheep.$router.go('/pages/user/index/index')
    }
    share_id.value = options.share_id
    department_id.value = options.department_id
    getDepartmentView()
  })
// 获取部门title
const department_title = ref()
const getDepartmentView = async()=>{
  let params ={
    ids: department_id.value 
  }
  const res = await sheep.$api.agency.departmentViewAPI(params)
  department_title.value = res.data.company.name + '/'+ res.data.name
}
  // 查看协议
  function onProtocol(id, title) {
    sheep.$router.go('/pages/public/richtext', {
      id,
      title,
    });
  }
  //勾选协议
  function onChange() {
    protocol.value = !protocol.value;
  }
  const currentProtocol = ref(false);
//打卡弹窗
const popshows = ref(false)
const dataToinformaion = ref({
  subtitle: '报名成功，请准时上班',
  imageSrc: '',
  dialogStatus: true
})
//打卡弹窗关闭
function closepop(e) {
  popshows.value = e
  if(e == false){
        setTimeout(()=>{
                sheep.$router.back()
            },2000)
    }
        
}
  // 同意成为代理人
  const consent = () => {
    if (!protocol.value) {
      // TODO：协议div晃动效果s
      currentProtocol.value = true;
      setTimeout(() => {
        currentProtocol.value = false;
      }, 1000);
      sheep.$helper.toast('请勾选相关协议');
      return;
    }
    postuser_agentAdd()
    // sheep.$router.back()
  }
  
      // 封装同意成为代理人接口
  const postuser_agentAdd = async () => {
    let params = {
      department_id:department_id.value,
      share_id:share_id.value
    }
    const res = await sheep.$api.agency.postuser_agentAddAPI(params)
    if(res.code == 1){
        // sheep.$helper.toast(res.msg);
        sheep.$store('user').getInfo();
        dataToinformaion.value.subtitle = res.msg
        dataToinformaion.value.dialogStatus = true
        dataToinformaion.value.imageSrc = '/uploads/uniapp_image/user/shengchengqiandao_icon6.png'
        popshows.value = true
      
    }else{
        // sheep.$helper.toast(res.msg);
        dataToinformaion.value.subtitle = res.msg
        dataToinformaion.value.dialogStatus = false
        popshows.value = true
    }
  }

</script>

<style lang="scss" scoped>
  .max_box {
    position: relative;
    // width: 100%;
    background-size: cover;
    background-position: center;
    padding: 0 40rpx;
  }
  .department {
    height: 86rpx;
    width: calc(100% - 178rpx);
    background-size: cover; /* 或 contain */
		background-repeat :no-repeat;
    position: absolute;
    top: 556rpx;
    margin: 0 46rpx 0 52rpx;
    font-family: PingFangSC;
    color: #FFFFFF;
    font-weight: $uni-font-weight;
    font-size: 44rpx;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    line-height: 86rpx;
  }

  .position_bottom {
    position: absolute;
    bottom: 76rpx;
  }

  .button {
    width: 670rpx;
    height: 90rpx;
    border-radius: 25px;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    text-align: center;
    line-height: 90rpx;
    font-family: PingFangSC;
    color: #FFFFFF;
    font-weight: $uni-font-weight;
    font-size: $uni-font-size-big;
    font-style: normal;
    text-decoration: none;
    margin-bottom: 30rpx;
  }
  .agreement {
    font-family: PingFangSC;
    color: #999;
    font-weight: 500;
    font-size:$uni-font-size-26;
    .radio {
      display: flex;
      justify-content: center;
      view {
        margin-left: 50rpx;
        text {
          color: $uni-color-primary;
          font-weight: $uni-font-weight;
        }
      }
      .is-checked {
        width: 8rpx;
        height: 8rpx;
        transform:scale(0.6);
        color: $uni-color-primary;
      }
    }
  }
  .shake {
    animation: shake 0.05s linear 4 alternate;
  }
  @keyframes shake {
    from {
      transform: translateX(-10rpx);
    }

    to {
      transform: translateX(10rpx);
    }
  }

</style>